<template>
    <hooyn-nav-bar 
        class="header" 
        leftIcon="arrow-left" 
        :title="($route.query.title || '园区')" 
        backgroundColor="#6aa2f9" 
        leftIconfont="true" 
        leftIconColor="#fff"
        fontSize="1rem"
        color="#fff"
        :returnNav="true">
    </hooyn-nav-bar>
    <div class="detail-box">
        <div class="banner">
            <img src="../../assets/firm-detail.png" alt="">
        </div>
        <div class="address">
            <img class="address-img" src="../../assets/address.png" alt="">
            <span>
                深圳市宝安区罗燕街道朝阳路78号
            </span>
        </div>
        <div class="textarea">
            {{intro}}
            <div class="arrow" :class="{'arrow-top': state.shwoIntro, 'arrow': true}">
                <img v-if="state.info.intro.length > state.introLenght" @click="state.shwoIntro = !state.shwoIntro" src="../../assets/arrow-down.png" alt="">
            </div>
        </div>

        <div class="serve">
            <div class="card-header">
                <div>产品展示</div>
            </div>
            <ul>
                <li v-for="(item, index) in state.produce" :key="index">
                    <img :src="item.img" alt="">
                    <div class="text">
                        <span class="top">{{item.Name}}</span>
                        <span class="small">{{item.detailed}}</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="serve">
            <div class="card-header">
                <div>企业荣誉</div>
            </div>
            <div class="textarea">
                {{honor}}
                <div class="arrow" :class="{'arrow-top': state.shwoHonor, 'arrow': true}">
                    <img v-if="state.info.honor.length > state.introLenght" @click="state.shwoHonor = !state.shwoHonor" src="../../assets/arrow-down.png" alt="">
                </div>
            </div>
        </div>
        

    </div>
</template>

<script setup>

const state = reactive({
    introLenght: 152,
    shwoIntro: false,
    shwoHonor: false,
    info: {
        intro: '鹏鼎控股(深圳)有限公司成立于1999年4月29日，由富葵精密组件(深圳)有限公司整体变更设立台资企业，注册资本万元人民币，法定代表人沈庆芳，主要从事各类印制电路板的设计、研发、制造与销售业务，产品包括柔性印剧电路板、高密度印刷电路板、硬质电路板等。鹏鼎控股(深圳)有限公司成立于1999年4月29日，由富葵精密组件(深圳)有限公司整体变更设立台资企业，注册资本232043.7816万元人民币，法定代表人沈庆芳，主要从事各类印制电路板的设计、研发、制造与销售业务，产品包括柔性印剧电路板、高密度印刷电路板、硬质电路板等。',
        honor: '国家高新技术企业、国家级制造业单项冠军企业国家级知识产权优势企业、国家级企业技术中心、广东省智能制造企业、深圳市环境安全标准化管理"双百“示范企业、深圳市危险废物规范化管理”双百“示范企业、规上企业、2023年厂省制造业企业500强(第21位）。国家高新技术企业、国家级制造业单项冠军企业国家级知识产权优势企业、国家级企业技术中心、广东省智能制造企业、深圳市环境安全标准化管理"双百“示范企业、深圳市危险废物规范化管理”双百“示范企业、规上企业、2023年厂省制造业企业500强(第21位）。'
    },
    produce: [
        {
            Name: '通讯类',
            detailed: '我公司生产的通讯用板涵盖主板、配板及扬声器、天线、相机、LCM、指纹辨识等多种模组板。',
            img: require('../../assets/ds-one.png')
        },
        {
            Name: '消费电子及计算机',
            detailed: '公司早期即涉足此领域，生产光学量测板、振动器模组板等，满足PCB高性能需求。',
            img: require('../../assets/ds-two.png')
        },
        {
            Name: '汽车/服务器用板及其他用版',
            detailed: '公司近年来加快了对汽车及高速服务器用板市场的开拓，相关产品已经和正在陆续获得国内外客户认证。',
            img: require('../../assets/ds-three.png')
        },
    ]
})

const intro = computed(() => {
    if (state.shwoIntro) {
        return state.info.intro
    } else {
        let str = state.info.intro.slice(0,state.introLenght)  + '...'
        console.log(str);
        return str
    }
})

const honor = computed(() => {
    if (state.shwoHonor) {
        return state.info.honor
    } else {
        let str = state.info.honor.slice(0,state.introLenght) + '...'
        console.log(str);
        return str
    }
})

onMounted(() =>{

})
</script>
<style lang='scss' scoped>
.detail-box {
    width: 100vw;
    padding: 1rem;
    color: #333;
}
.banner {
    width: 100%;
    height: 13rem;
    img {
        width: 100%;
        height: 100%;
    }
}

.address {
    display: flex;
    padding: 1rem 0rem 0rem;
    align-items: center;
    font-size: 1rem;
    .address-img {
        height: 1.25rem;
        margin-right: .375rem;
        margin-left: -2px;
    }
}

.textarea {
    font-size: .875rem;
    text-indent: 1.75rem;
    padding: .75rem 0rem 0rem;
    line-height: normal;
    position: relative;
    &+.textarea {
        padding-top: 0rem;
    }
}

.serve {
    ul {
        margin-top: .75rem;
        li {
            display: flex;
            align-items: flex-start;
            padding: 10px 0px;
            img {
                width: 7rem;
                height: 4.5rem;
            }
            .text {
                width: calc(100% - 6.625rem);
                display: flex;
                flex-direction: column;
                margin-left: .625rem;
                span:nth-child(1) {
                    font-size: .9375rem;
                    margin-bottom: 4px;
                    color: #5d9cfa;
                    font-weight: 600;
                }
                span:nth-child(2) {
                    font-size: .75rem;
                    color: #878787;
                }

            }
        }
    }
}

.arrow {
    text-align: right;
    bottom: 0px;
    img {
        height: 0.6rem;
        position: relative;
        top: 2px;
    }
    &.arrow-top {
        img {
            transform: rotateZ(180deg);
        }
    }
}
</style>